<template>
  <!--  <page-layout :title="description">-->
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="箱东代码">
              <j-dict-select-tag placeholder="请选择箱东代码" v-model="queryParam.containerCode" dictCode="soc" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="箱东名称">
              <a-input placeholder="请输入箱东名称" v-model="queryParam.containerName"></a-input>
            </a-form-item>
          </a-col>
          <!--          <template v-if="toggleSearchStatus">-->

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="客户业务编号">
              <a-input placeholder="请输入客户业务编号" v-model="queryParam.customerBusinessNumber"></a-input>
            </a-form-item>
          </a-col>
          <!--          <a-col :xl="6" :lg="7" :md="8" :sm="24">-->
          <!--            <a-form-item label="出场时间">-->
          <!--              <a-range-picker v-model="queryParam.outTime" @change="ccc"/>-->
          <!--&lt;!&ndash;              <a-input placeholder="请输入出场时间" v-model="queryParam.outTime"></a-input>&ndash;&gt;-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="箱号">
              <a-input placeholder="请输入箱号" v-model="queryParam.containerNumber"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="箱型">
              <j-dict-select-tag placeholder="请选择箱型" v-model="queryParam.containerType" dictCode="box_type" />
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="起运港">
              <!--              <a-input placeholder="请输入起运港" v-model="queryParam.pol"></a-input>-->
              <!--              <a-auto-complete-->
              <!--                v-model:value="queryParam.pol"-->
              <!--                :options="portData"-->
              <!--                placeholder="input here"-->
              <!--                :filter-option="filterOption"-->
              <!--              />-->
              <!--              <a-select-->
              <!--                label-in-value-->
              <!--                v-model="polDesc"-->
              <!--                placeholder="起运港"-->
              <!--                style="width: 100%"-->
              <!--                :filter-option="false"-->
              <!--                show-search-->
              <!--                allowClear-->
              <!--                :showArrow="false"-->
              <!--                :defaultActiveFirstOption="false"-->
              <!--                @blur="portBlur"-->
              <!--                @change="portSelect"-->
              <!--                @search="searchPolPort"-->
              <!--                option-label-prop="label"-->
              <!--                :dropdownMatchSelectWidth="false"-->
              <!--                :getPopupContainer="-->
              <!--                        triggerNode => {-->
              <!--                          return triggerNode.parentNode || document.body;-->
              <!--                        }-->
              <!--                      "-->
              <!--              >-->
              <!--                <a-select-option v-for="(d,key) in portData" :label="d.value" :value="d.value">-->
              <!--                  {{ d.text }}-->
              <!--                </a-select-option>-->
              <!--              </a-select>-->
              <a-auto-complete allowClear v-model="queryParam.polDesc" placeholder="起运港"
                               :dataSource="portData" @search="portHandleSearch" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="目的港">
              <!--              <a-input placeholder="请输入起运港" v-model="queryParam.pol"></a-input>-->
              <!--              <a-auto-complete-->
              <!--                v-model:value="queryParam.pol"-->
              <!--                :options="portData"-->
              <!--                placeholder="input here"-->
              <!--                :filter-option="filterOption"-->
              <!--              />-->
              <!--              <a-select-->
              <!--                label-in-value-->
              <!--                v-model="podDesc"-->
              <!--                placeholder="目的港"-->
              <!--                style="width: 100%"-->
              <!--                :filter-option="false"-->
              <!--                show-search-->
              <!--                allowClear-->
              <!--                :showArrow="false"-->
              <!--                :defaultActiveFirstOption="false"-->
              <!--                @blur="podPortBlur"-->
              <!--                @change="podPortSelect"-->
              <!--                @search="searchPodPort"-->
              <!--                option-label-prop="label"-->
              <!--                :dropdownMatchSelectWidth="false"-->
              <!--                :getPopupContainer="-->
              <!--                        triggerNode => {-->
              <!--                          return triggerNode.parentNode || document.body;-->
              <!--                        }-->
              <!--                      "-->
              <!--              >-->
              <!--                <a-select-option v-for="(d,key) in portData" :label="d.value" :value="d.value">-->
              <!--                  {{ d.text }}-->
              <!--                </a-select-option>-->
              <!--              </a-select>-->
              <a-auto-complete allowClear v-model="queryParam.podDesc" placeholder="目的港"
                               :dataSource="portData" @search="portHandleSearch" />
            </a-form-item>
          </a-col>
          <!--          </template>-->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <!--              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
              <!-- 高级查询区域 -->
              <j-super-query style="margin-left: 8px" :fieldList="fieldList" ref="superQueryModal"
                             @handleSuperQuery="handleSuperQuery"></j-super-query>
              <!--              <a @click="handleToggleSearch" style="margin-left: 8px">-->
              <!--                {{ toggleSearchStatus ? '收起' : '展开' }}-->
              <!--                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />-->
              <!--              </a>-->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-dropdown :trigger="['click']">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1">
            <a-icon type="info" />
            单条新增
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="gold" />
            批量新增
          </a-menu-item>
        </a-menu>
        <a-button type="primary">
          <a-icon type="plus" />
          新增
        </a-button>
      </a-dropdown>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
                @change="handleImportExcel">
        <a-button type="primary" icon="import" ghost>导入</a-button>
      </a-upload>
      <a-button type="primary" icon="download" ghost @click="handleExportXls('集装箱管理')">导出</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete" />
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
        style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        <a-popover title="自定义列" trigger="click" placement="leftBottom" style="float: right">
          <template slot="content">
            <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
              <a-row>
                <template v-for="(item,index) in defColumns">
                  <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                    <a-col :span="12">
                      <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
                    </a-col>
                  </template>
                </template>
              </a-row>
            </a-checkbox-group>
          </template>
          <a>
            <a-icon type="setting" />
            自定义列</a>
        </a-popover>

        <a style="margin-right:20px;float: right" @click="showHiddenActionCol">{{ actionLabel }}</a>
        <span style="margin-right:20px;float: right">
          <a-select size="small" defaultValue="5000" style="width:120px" @change="refreshData">
           <a-select-option value="5000">每5秒刷新</a-select-option>
           <a-select-option value="30000">每30秒刷新</a-select-option>
           <a-select-option value="60000">每1分钟刷新</a-select-option>
          </a-select>
        </span>
      </div>

      <a-table
        ref="table"
        size="small"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :components="components"
        :scroll="{x:1500,y:450}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
        :customRow="handleSelectEdit">

        <!--        <template slot="htmlSlot" slot-scope="text">-->
        <!--          <div v-html="text"></div>-->
        <!--        </template>-->
        <!--        <template slot="imgSlot" slot-scope="text">-->
        <!--          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>-->
        <!--          <img v-else :src="getImgView(text)" height="25px" alt=""-->
        <!--               style="max-width:80px;font-size: 12px;font-style: italic;" />-->
        <!--        </template>-->
        <!--        <template slot="fileSlot" slot-scope="text">-->
        <!--          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>-->
        <!--          <a-button-->
        <!--            v-else-->
        <!--            :ghost="true"-->
        <!--            type="primary"-->
        <!--            icon="download"-->
        <!--            size="small"-->
        <!--            @click="downloadFile(text)">-->
        <!--            下载-->
        <!--          </a-button>-->
        <!--        </template>-->
        <template #footer>{{ Footer }}</template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)"><a-icon type="form"></a-icon>编辑</a>
          <template v-if="record.status==1">
            <a-divider type="vertical" />
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a><a-icon type="delete"></a-icon>删除</a>
                </a-popconfirm>
          </template>
          <template v-if="record.status==1 ||record.status==2">
              <a-divider type="vertical" />
              <a-dropdown>
                <a class="ant-dropdown-link">设置 <a-icon type="down" /></a>
                <a-menu slot="overlay">
                  <a-menu-item v-if="record.status==2">
                      <a-popconfirm
                        title="是否继续该操作?"
                        ok-text="是"
                        cancel-text="否"
                        @confirm="setStatus(record,1)"
                      >
                        <a><a-icon type="tag"></a-icon>可用</a>
                      </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item v-if="record.status==1">
                      <a-popconfirm
                        title="是否继续该操作?"
                        ok-text="是"
                        cancel-text="否"
                        @confirm="setStatus(record,2)"
                      >
                        <a><a-icon type="tag"></a-icon>已用其他</a>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
          </template>

          <!--          <a-dropdown>-->
          <!--            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>-->
          <!--            <a-menu slot="overlay">-->
          <!--              <a-menu-item>-->
          <!--                <a @click="handleDetail(record)">详情</a>-->
          <!--              </a-menu-item>-->
          <!--              <a-menu-item v-if="record.status==1">-->
          <!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
          <!--                  <a>删除</a>-->
          <!--                </a-popconfirm>-->
          <!--              </a-menu-item>-->
          <!--            </a-menu>-->
          <!--          </a-dropdown>-->
        </span>

      </a-table>
    </div>

    <jzx-info-modal ref="modalForm" @ok="modalFormOk" />
    <a-modal
      title="批量增加集装箱"
      :maskClosable=false
      :visible="manyModalVisible"
      :confirm-loading="confirmLoading"
      :width=700
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-spin :spinning="confirmLoading">
        <j-form-container>
          <a-form :form="form" slot="detail">
            <a-row>
              <a-col :span="12">
                <a-form-item label="箱东代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-dict-select-tag type="list" v-decorator="['containerCode']"
                                     :trigger-change="true" dictCode="soc" placeholder="请选择箱东代码" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="箱型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-dict-select-tag type="list" v-decorator="['containerType', validatorRules.containerType]"
                                     :trigger-change="true" dictCode="box_type" placeholder="请选择箱型" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="新箱/旧箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-dict-select-tag type="radio" v-decorator="['conditionType']" :trigger-change="true"
                                     dictCode="box_condition" placeholder="请选择新箱/旧箱" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="添加数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input v-decorator="['count', validatorRules.count]" placeholder="请输入添加的数量"
                           style="width: 100%" suffix="个" :maxLength=3 />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </j-form-container>
      </a-spin>
    </a-modal>
  </a-card>
  <!--  </page-layout>-->
</template>

<script>

import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JzxInfoModal from './modules/JzxInfoModal'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import '@/assets/less/TableExpand.less'
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'
import Vue from 'vue'
import { getAction, httpAction } from '@api/manage'
import PageLayout from '@/components/page/PageLayout'
import moment from 'moment'
import { ajaxGetDictItems } from '@api/api'
import JzxInfoForm from '@views/jzxinfo/modules/JzxInfoForm'
import JzxInfoFormWindow from '@views/jzxinfo/modules/JzxInfoFormWindow'

const superQueryFieldList = [{
  type: 'select',
  value: 'containerCode',
  text: '箱东代码',
  dictCode: 'soc'
}, {
  type: 'string',
  value: 'containerName',
  text: '箱东名称'
}, {
  type: 'string',
  value: 'customerBusinessNumber',
  text: '客户业务编号'
}, {
  type: 'select',
  value: 'containerType',
  text: '箱型',
  dictCode: 'box_type'
}, {
  type: 'string',
  value: 'containerNumber',
  text: '箱号'
}, {
  type: 'select',
  value: 'conditionType',
  text: '新箱/旧箱',
  dictCode: 'box_condition'
}, {
  type: 'select',
  value: 'containerPlace',
  text: '送箱场地',
  dictCode: 'yard_info,yard_info_col,id,sys_org_code=\'' + Vue.ls.get('Login_Userinfo').orgCode + '\''
  // options: []
}, {
  type: 'date',
  value: 'inTime',
  text: '进场时间'
}, {
  type: 'date',
  value: 'outTime',
  text: '出场时间'
}, {
  type: 'number',
  value: 'freeDepositDays',
  text: '免费堆存天数'
}, {
  type: 'number',
  value: 'overstockingDays',
  text: '超期堆存天数'
}, {
  type: 'select',
  value: 'status',
  text: '集装箱状态',
  options: [
    { label: '可用', value: 1 },
    { label: '使用中', value: 0 },
    { label: '已用其他', value: 2 }
  ]
}]
export default {
  name: 'JzxInfoList',
  mixins: [JeecgListMixin],
  components: {
    JDictSelectTag,
    JzxInfoModal,
    JSuperQuery,
    PageLayout
  },
  data() {
    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props
          const col = this.columns.find(col => {
            const k = col.dataIndex || col.key
            return k === key
          })

          if (!col || !col.width) {
            return h('th', { ...restProps }, [...children])
          }

          const dragProps = {
            key: col.dataIndex || col.key,
            class: 'table-draggable-handle',
            attrs: {
              w: 10,
              x: col.width,
              z: 1,
              axis: 'x',
              draggable: true,
              resizable: false
            },
            on: {
              dragging: (x, y) => {
                col.width = Math.max(x, 1)
              }
            }
          }
          const drag = h('vue-draggable-resizable', { ...dragProps })
          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
        }
      }
    }

    return {
      actionLabel: '隐藏操作列',
      Footer: '',
      polDesc: {},
      podDesc: {},
      manyModalVisible: false,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      validatorRules: {
        containerCode: {
          rules: [
            { required: true, message: '请输入箱东代码!' }
          ]
        },
        containerType: {
          rules: [
            { required: true, message: '请输入箱型!' }
          ]
        },
        count: {
          rules: [
            { required: true, message: '请输入集装箱数量' },
            { pattern: /^-?\d+$/, message: '请输入整数!' }
          ]
        }
      },
      form: this.$form.createForm(this),
      description: '集装箱管理',
      columns: [],
      //列设置
      settingColumns: [],
      // 表头
      defColumns: [
        {
          title: '集装箱状态',
          align: 'center',
          width: 100,
          fixed: 'left',
          dataIndex: 'status',
          customRender: function(text) {
            if (text == 1) {
              return <span style="width:70px;color:#2db7f5">可用</span>
            } else if (text == 0) {
              return <span style="width:70px;color:#f50">使用中</span>
            } else if (text == 2) {
              return <span style="width:70px;color:#fd9827">已用其他</span>
            }
          }
        },
        {
          title: '箱号',
          align: 'left',
          width: 150,
          fixed: 'left',
          dataIndex: 'containerNumber',
          ellipsis: true
        },
        {
          title: '箱型',
          align: 'center',
          width: 150,
          fixed: 'left',
          dataIndex: 'containerType_dictText'
        },
        {
          title: '新箱/旧箱',
          align: 'center',
          width: 90,
          fixed: 'left',
          dataIndex: 'conditionType_dictText'
        },
        {
          title: '箱东代码',
          align: 'center',
          width: 90,
          dataIndex: 'containerCode_dictText'
        },
        {
          title: '箱东名称',
          align: 'left',
          width: 100,
          dataIndex: 'containerName',
          ellipsis: true
        },
        {
          title: '客户业务编号',
          align: 'left',
          width: 200,
          dataIndex: 'customerBusinessNumber',
          ellipsis: true
        },

        {
          title: '起运港',
          align: 'left',
          width: 200,
          dataIndex: 'polDesc',
          ellipsis: true,
          customRender: function(text, r) {
            return text ? text : r.pol
          }
        },
        {
          title: '目的港',
          align: 'left',
          width: 200,
          dataIndex: 'podDesc',
          ellipsis: true,
          customRender: function(text, r) {
            return text ? text : r.pod
          }
        },
        {
          title: '送箱场地',
          align: 'left',
          width: 200,
          dataIndex: 'containerPlace_dictText',
          ellipsis: true
        },
        {
          title: '进场时间',
          align: 'center',
          width: 120,
          dataIndex: 'inTime',
          customRender: function(text) {
            return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
          }
        },
        {
          title: '出场时间',
          align: 'center',
          width: 120,
          dataIndex: 'outTime',
          customRender: function(text) {
            return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
          }
        },
        {
          title: '总堆存天数',
          align: 'right',
          width: 100,
          dataIndex: 'totalDepositDays',
          customRender: function(text) {
            return text ? text + '天' : '0天'
          }
        },
        {
          title: '免费堆存天数',
          align: 'right',
          width: 100,
          dataIndex: 'freeDepositDays',
          customRender: function(text) {
            return text ? text + '天' : '0天'
          }
        },
        {
          title: '超期堆存天数',
          align: 'right',
          width: 100,
          dataIndex: 'overstockingDays',
          customRender: function(text) {
            return text ? text + '天' : '0天'
          }
        },
        {
          title: '超期堆存费',
          align: 'center',
          width: 130,
          dataIndex: 'overdueStorageFee',
          customRender: function(text, record) {
            return record.overdueStorageFeeUnit ? record.overdueStorageFeeUnitCurrency + record.overdueStorageFeeUnit : record.overdueStorageFeeCurrency + text
          }
        },
        {
          title: '备注',
          align: 'center',
          width: 200,
          dataIndex: 'remark',
          ellipsis: true
        },
        // {
        //   title: '免费用箱时间',
        //   align: 'right',
        //   width: 150,
        //   dataIndex: 'freeTimes',
        //   customRender: function(text) {
        //     return text ? text + '天' : '0天'
        //   }
        // },
        // {
        //   title: '生产日期',
        //   width: 200,
        //   dataIndex: 'productionDate',
        //   customRender: function(text) {
        //     return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
        //   }
        // },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'left',
          fixed: 'right',
          width: 180,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/box.info/jzxInfo/list',
        delete: '/box.info/jzxInfo/delete',
        deleteBatch: '/box.info/jzxInfo/deleteBatch',
        exportXlsUrl: '/box.info/jzxInfo/exportXls',
        importExcelUrl: 'box.info/jzxInfo/importExcel'

      },
      actionColumn: {
        title: '操作',
        dataIndex: 'action',
        align: 'left',
        fixed: 'right',
        width: 247,
        scopedSlots: { customRender: 'action' }
      },
      dictOptions: {},
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '100', '200']
      },
      superQueryFlag: false,
      superQueryParams: '',
      fieldList: superQueryFieldList,
      portData: [],
      layerPopData: {}
      // podPortInputData: '',
      // polPortInputData: ''
    }
  },
  created() {
    this.initColumns()
    // this.initDictConfig()
  },
  mounted() {
    this.timer = setInterval(() => {
      this.loadDataNoLoading()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    refreshData(value, option) {
      console.log(value)
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.loadDataNoLoading()
      }, value)
    },
    moment,

    // searchPolPort(val) {
    //   this.getPortData(val, 1)
    // },
    // searchPodPort(val) {
    //   this.getPortData(val, 2)
    // },
    handleSelectEdit(record, index) {
      return {
        on: {
          dblclick: () => {
            this.handleEdit(record)
            // console.log(record,index)
          }
        }
      }
    },
    // getPortData(val, type) {
    //   if (val && type == 1) {
    //     this.polPortInputData = val
    //   }
    //   if (val && type == 2) {
    //     this.podPortInputData = val
    //   }
    //   let params = { name: val }
    //   getAction('/box/dictPort/findbyname', params).then(res => {
    //     if (res.code == 200) {
    //       let data = []
    //       res.result.forEach(item => {
    //         data.push({
    //           value: item.enName,
    //           text: item.enName
    //         })
    //       })
    //       this.portData = data
    //     }
    //   })
    // },
    setStatus(record, status) {
      let url = '/box.info/jzxInfo/setstatus', method = 'post'
      httpAction(url, 'id=' + record.id + '&status=' + status, method).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loadData()
      })
    },
    handleMenuClick({ key }) {
      if (key == 1) {
        this.handleAdd()
      } else if (key == 2) {
        this.showAddManyModal()
      }
    },
    //批量添加
    showAddManyModal() {
      this.manyModalVisible = true
    },
    //批量添加确定按钮
    handleOk(e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          console.log('Received values of form: ', values)
          let url = '/box.info/jzxInfo/addmany', method = 'post'
          this.confirmLoading = true
          console.log('formData===>', values)
          httpAction(url, values, method).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok')
              this.manyModalVisible = false
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
            this.form.resetFields()
            this.loadData()
          })
        }
      })
    },
    handleCancel(e) {
      this.manyModalVisible = false
    },
    //高级查询方法
    handleSuperQuery(arg) {
      if (!arg) {
        this.superQueryParams = ''
        this.superQueryFlag = false
      } else {
        this.superQueryFlag = true
        this.superQueryParams = JSON.stringify(arg)
      }
      this.loadData()
    },
    // 获取查询条件
    getQueryParams() {
      let sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
      }
      var param = Object.assign(sqp, this.queryParam, this.isorter)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      // param.polDesc = this.polPortInputData
      // param.podDesc = this.podPortInputData
      return this.filterObj(param)
    },
    filterObj(obj) {
      if (!(typeof obj == 'object')) {
        return
      }

      for (let key in obj) {
        if (obj.hasOwnProperty(key)
          && (obj[key] == null || obj[key] == undefined || obj[key] === '')) {
          delete obj[key]
        }
      }
      return obj
    },
    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ':colsettings'
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues
      const cols = this.defColumns.filter(item => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns = cols
    },
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

      var key = this.$route.name + ':colsettings'
      let colSettings = Vue.ls.get(key)
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = []
        this.defColumns.forEach(function(item, i, array) {
          allSettingColumns.push(item.dataIndex)
        })
        this.settingColumns = allSettingColumns
        this.columns = this.defColumns
      } else {
        this.settingColumns = colSettings
        const cols = this.defColumns.filter(item => {
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true
          }
          if (colSettings.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        this.columns = cols
      }
    },
    // portBlur() {
    //   this.polDesc = { label: this.polPortInputData, key: this.polPortInputData }
    // },
    // portSelect(val) {
    //   this.polPortInputData = val ? val.label : ''
    // },
    // podPortBlur() {
    //   this.podDesc = { label: this.podPortInputData, key: this.podPortInputData }
    // },
    // podPortSelect(val) {
    //   this.podPortInputData = val ? val.label : ''
    // },
    //显示隐藏操作列
    showHiddenActionCol() {
      if (this.actionLabel == '隐藏操作列') {
        this.columns.splice(this.columns.length - 1, 1)
        this.actionLabel = '显示操作列'
      } else {
        this.columns.push(this.actionColumn)
        this.actionLabel = '隐藏操作列'
      }
    },
    handleAdd() {
      let that = this
      this.$layer.open({
        title: '新增集装箱',
        type: 2,
        area: ['1200px', '600px'],
        maxmin: true,
        shade: 0,
        resize: true,
        shadeClose: false,
        anim: 1,
        content: {
          content: JzxInfoFormWindow,
          parent: this
        },
        cancel: function(i, layero) {
          that.loadData()
        }
      })
    },
    /**
     * 带最小化弹出层
     * 2020-04-27
     * author dongw
     * @param record
     */
    handleEdit(record) {
      if (this.layerPopData[record.id]) {
        this.$message.warn('窗口已打开')
      } else {
        let that = this
        let index = this.$layer.open({
          id: record.id,
          title: '箱管：' + record.containerNumber,
          type: 2,
          area: ['1200px', '600px'],
          maxmin: true,
          shade: 0,
          resize: true,
          shadeClose: false,
          anim: 0,
          content: {
            content: JzxInfoFormWindow,
            parent: this,
            data: { editData: record, editType: true }
          },
          cancel: function(i, layero) {
            delete that.layerPopData[record.id]
            that.loadData()
          }
        })
        this.layerPopData[record.id] = index
      }

    },
    portHandleSearch(value) {
      let params = { name: value }
      getAction('/box/dictPort/findbyname', params).then(res => {
        if (res.code == 200) {
          let data = []
          res.result.forEach(item => {
            data.push(item.enName)
          })
          this.portData = data
        }
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style scoped>
/deep/ .ant-table {
  min-height: 450px !important;
}

/deep/ .ant-empty-normal {
  margin: 140px 0 !important;
}

/deep/ .ant-row .ant-form-item {
  margin-bottom: 5px;
}
</style>
<style lang="less">
.resize-table-th {
  position: relative;

  .table-draggable-handle {
    transform: none !important;
    position: absolute;
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
  }
}
</style>